html,body{height:100%;margin:0;padding:0}
#wrapper{min-height:100%;display:flex;flex-direction:column}

@media screen and (min-width:523px){#boxcontainer{padding-top:16px; padding-left:0px; padding-right:0px;margin-bottom:0px;width:100%;height:auto;position:relative;background-color:#fafafa;display:flex;flex-wrap:wrap;justify-content:center;align-content:start;flex:1}

#boxmain{display:inline-block;position:relative;margin-left:16px;padding:0;margin-right:16px;margin-bottom:40px;max-width:300px;min-width:300px;max-height:377px;min-height:377px;background:#fafafa;transition:0.3s; justify-content: center;align-items: center; box-shadow:2px 2px 4px 0px #7f7f7f;}
    
#boxmain img{width:100%;height:377px;object-fit:cover;display:block}



.boxtext {border-radius: 0px;background-color: lightpink;border: 2px solid #1c1c1c;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);white-space: nowrap;box-shadow: 3px 3px 0px 0px #1c1c1c;transition: 0.3s;width: 242px;height: 98px;display: flex;justify-content: center;align-items: center;}

.boxtext:hover {
  background-color: #ec98a5;
}

img{max-width:100%;max-height:100%;margin:0;padding:0}

#introbox{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:0;padding-top:144px;text-align:center;max-width:600px;width:100%;margin-top:200px;margin:0 auto;display:block;margin-top:0px; margin-bottom:26px}}  



@media screen and (min-width:523px) and (max-width:663px){    



#boxmain{display:inline-block;position:relative;margin-left:10px;padding:0;margin-right:10px;margin-bottom:20px;max-width:140px;min-width:140px;max-height:175px;min-height:175px;background:#fafafa;transition:0.3s ; box-shadow:1px 1px 4px 0px #7f7f7f;}

#boxmain:hover{display:inline-block;position:relative;margin-left:10px;padding:0;margin-right:10px;margin-bottom:20px;max-width:140px;min-width:140px;max-height:175px;min-height:175px;background:#fafafa;transition:0.3s; transition:0.3s; box-shadow:1px 1px 4px 0px #7f7f7f;}

#boxmain img{width:100%;height:175px;object-fit:cover;display:block}

.boxtext{border-radius:0px;background-color: rgba(255, 182, 193, 0.8);border:2px solid #1c1c1c;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:3px 3px 0px 0px #1c1c1c;transition:0.3s;white-space:normal;word-wrap:break-word;text-align:center;width:108px; height:124px;padding:4px}
    
.boxtext:hover{border-radius:0px;background-color: rgba(236, 137, 152, 0.8);border:2px solid #1c1c1c;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:3px 3px 0px 0px #1c1c1c;transition:0.3s;white-space:normal;word-wrap:break-word;text-align:center;width:108px; height:124px;padding:4px}  
    
}






@media screen and (max-width:522px){
#boxcontainer{padding-top:16px; padding-left:0px; padding-right:0px;margin-bottom:0px;width:100%;height:auto; position:relative;background-color:#fafafa;display:flex;flex-wrap:wrap;justify-content:center;align-content:start;flex:1}

#boxmain{display:inline-block;position:relative;margin-left:10px;padding:0;margin-right:10px;margin-bottom:20px;max-width:140px;min-width:140px;max-height:175px;min-height:175px;background:#fafafa;transition:0.3s; box-shadow:1px 1px 4px 0px #7f7f7f;}

#boxmain:hover{display:inline-block;position:relative;margin-left:10px;padding:0;margin-right:10px;margin-bottom:20px;max-width:140px;min-width:140px;max-height:175px;min-height:175px;background:#fafafa;transition:0.3s; transition:0.3s; box-shadow:1px 1px 4px 0px #7f7f7f;}

#boxmain img{width:100%;height:175px;object-fit:cover;display:block}

.boxtext{border-radius:0px;background-color: rgba(255, 182, 193, 0.8);border:2px solid #1c1c1c;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:3px 3px 0px 0px #1c1c1c;transition:0.3s;white-space:normal;word-wrap:break-word;text-align:center;width:108px; height:124px;padding:4px}
    
.boxtext:hover{border-radius:0px;background-color: rgba(236, 137, 152, 0.8);border:2px solid #1c1c1c;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:3px 3px 0px 0px #1c1c1c;transition:0.3s;white-space:normal;word-wrap:break-word;text-align:center;width:108px; height:124px;padding:4px}    

img{max-width:100%;max-height:100%;margin:0;border:0}

#introbox{display:flex;flex-direction:column;justify-content:center;align-items:center; padding-bottom:0;padding-top:68px;text-align:center;max-width:600px;width:100%;margin:0 auto;display:block;margin-top:0px}}

.footer{flex-shrink: 0;background-color: #404040; display:flex;justify-content:center;flex-direction:column;margin-bottom:0; padding-top:40px; padding-bottom:16px}
.footer-icons{display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;gap:6px}
.footer-text{display:flex;align-items:center;text-align:center}

main{flex:1}

body{display:flex;flex-direction:column;min-height:100vh; background-repeat:no-repeat;background-position:100% 0;background-color:#fafafa;max-width:100%;min-width: 320px;height:100%;margin:0;overflow-x:hidden;overflow-y:scroll}