@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&family=Syne+Mono&display=swap');



body {
    margin: 0;
    padding: 0;
    font-size: 1.5vw;
    color: rgb(0, 0, 0);
    overflow-x: hidden;
    
}

.bg{
    position: absolute;
    background-image: url(img/paper.jpg) ;
    
    background-size: cover;
    background-position: center;
   width: 100vw;
   height: 50vw;
}


.headtext {
    position: absolute;
    font-family: 'syne mono', monospace;
    color: rgb(0, 0, 0);
    font-size: 3vw;
    max-width: 55vw;
    text-align: center;
    margin-left: 22%;
    margin-top: 13%;
    text-shadow: 250px 240px 8px rgba(0, 0, 0, 0.5);
   
    
    
    
}

.lamp{
    position: absolute;
    width: 40vw;
    left: -5%;
    top: -45%;
    margin: 0%;
    padding: 0%;
    
}



.idk{
    display: flex;
    padding-top: 50vw;
 
   
width: 100vw;
height: 5vw;


}

/* tabs */

.wrapper {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
  }
  .tabs {
    position: relative;
   
    
    height: 10vw;
    display: flex;
    justify-content: space-evenly;
    
  }
  .tabs::before,
  .tabs::after {
    content: "";
    display: table;
  }
  .tabs::after {
    clear: both;
  }
  .tab {
    float: left;
  }
  .tab-switch {
    display: none;
  }


  
  .tab-label {

    align-self: center;
    background-color: #fff;
    
    background-position: 0 90%;
    background-repeat: repeat no-repeat;
    background-size: 4px 3px;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
    box-sizing: border-box;
    color: #41403e;
    cursor: pointer;
    display: inline-block;
    font-family: 'syne mono', monospace;
    font-size: 2rem;
    line-height: 23px;
    outline: none;
    padding: 2rem;
    text-decoration: none;
    transition: all 235ms ease-in-out;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .tab-label:hover {
    top: -0.25rem;
    transition: top 0.25s;
  }
  .tab-content {
    margin-top: 3vw;
    width: 100%;
    display: flex;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 2.75em;
    left: 0;
    padding: 1.618rem;
    background: #fff;
  
    opacity: 0;
    transition: all 0.35s;
    flex-direction: column;
   
  }
  .tab-switch:checked + .tab-label {
    background: #ffffff;
    color: #2c3e50;
    
   
    transition: all 0.35s;
    z-index: 1;
    top: -0.0625rem;
  }
  .tab-switch:checked + label + .tab-content {
    z-index: 2;
    opacity: 1;
    transition: all 0.35s;
  }
  



.tab-label:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.tab-label:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

.innercont{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/poly1.jpg);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  
  margin-bottom: 5vw;
  border-radius: 20px;
}

.b2{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/poly2.jpg);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 5vw;
  border-radius: 40px;
}

.b3{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/pol3.jpg);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 40px;
}



.innercont2{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/matrix.jpg) ;
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin-bottom: 5vw;
}


.c1{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-color: rgb(79, 79, 79);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin-bottom: 5vw;
}

.c2{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/synth.jpg);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin-bottom: 5vw;
}

.innercont3{
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/mariobg.jpg) ;
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin-bottom: 5vw;
}

.GDH{
  font-family: 'syne mono', monospace;
  color: rgb(255, 255, 255);
  font-size: 8vw;
  text-align: center;
  margin-top: 10vw;
  margin-bottom: 10vw;
  text-shadow: 30px 30px 8px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 0.3px black;

}

.GD{
  display: flex;
  font-family:  'syne mono', monospace;
  font-size: 1em;
  background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
  
    border-bottom: 0px;
    border-radius: 30px 30px 30px 30px;
    
}
.logo{
  width: auto;
  height: 20vw;
 margin-top: 2vw;
 margin-right: 1vw;
 margin-bottom: 1vw;
}

.g2{
  
  padding-left: 6em;
  padding-right: 6em;
  width: 79%;
  background-image: url(img/pixel.jpg);
  background-size:  100vw;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 5vw;
  border-radius: 40px;
}



.MDH{
  font-family: 'syne mono', monospace;
  color: rgb(255, 255, 255);
  font-size: 8vw;
  text-align: center;
  margin-top: 10vw;
  margin-bottom: 5vw;
  text-shadow: 30px 30px 8px rgba(0, 0, 0, 0.5);


}

.DH{
  font-family: 'syne mono', monospace;
  color: rgb(255, 255, 255);
  font-size: 6vw;
  text-align: center;
  margin-top: 10vw;
  margin-bottom: 5vw;
  text-shadow: 30px 30px 8px rgba(0, 0, 0, 0.5);
}

.talking{
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 10px 10px 10px;
  font-family: 'Kanit', sans-serif;
  margin-left: 10vw;
  margin-right: 10vw;
  font-size: 1.3em;
  padding: 1.8vw;
  
  
}

.bladerunner{
  display: flex;
 width: 70vw;
 height: auto;
 margin-top: 5vw;
 justify-content: center;
 border: rgb(206, 117, 0);
  border-style: solid;
  border-width: 10px;
  border-radius: 10px 10px 10px 10px;
  margin-left: 4vw;
  margin-bottom: 2vw;
}

.talking2{
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 10px 10px 10px;
  font-family: 'Kanit', sans-serif;
  font-size: 1.3em;
  padding: 1.8vw;
}
  
.figmas{
  margin-top: 5vw;
}

.talking3{
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 10px 10px 10px;
  font-family: 'Kanit', sans-serif;
  font-size: 1.3em;
  padding: 1.8vw;
  margin-bottom: 5vw;
}


.together{
  display: flex;
  flex-direction: row;
  margin-top: 5vw;
  margin-bottom: 5vw;
  justify-content: space-evenly;
}

.pacman{
  display: flex;
  width: 30vw;
  height: auto;
  margin-top: 1vw;
  border-radius: 10px 10px 10px 10px;
  
}

.website{
  display: flex;
  width: 70vw;
 height: auto;
 margin-top: 5vw;
 justify-content: center;
  border-radius: 10px 10px 10px 10px;
  margin-left: 4vw;
  margin-bottom: 2vw;
}



.desertion{
  display: flex;
 width: 70vw;
 height: auto;
 margin-top: 5vw;
 justify-content: center;
 border: rgb(52, 0, 57);
  border-style: solid;
  border-width: 10px;
  border-radius: 10px 10px 10px 10px;
  margin-left: 4vw;
  margin-bottom: 2vw;
}


.talking4{
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 10px 10px 10px;
  font-family: 'Kanit', sans-serif;
  font-size: 1.3em;
  padding: 1.2vw;
}



















/* calculator */


.dome{
  display: flex;
    align-items: center;
    
}

.calculator{
    width: 19.2vw;
    height: 35vw;
}

.buttonContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
}

#out{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.2vw;
    color: rgb(0, 0, 0);
 
}

.lowerContainer{
    width: 100%;
    height: 80%;
    display: flex;
}

.lowerContainerLeft{
    width: 75%;
    height: 100%;
    margin-right: 0.15vw;
}
.lowerContainerRight{
    width: 25%;
    height: 100%;
}

button{
    width: 4.5vw;
    height: 4.5vw;
   
    /* border: none; */
   margin-top: 0.2vw;
   margin-bottom: 0.2vw;
    font-size: 1.8vw;
    border: none;
}

#acButton{
    width: 9.25vw;
}
#zeroButton{
    width: 14.1vw;
}

.grayButton{
    background-color: rgb(214, 214, 214);
}
.grayButton:hover{
    background-color: rgb(245, 243, 243);
}



.darkerGrayButton{
    background-color: gray;
    color: white;
}
.darkerGrayButton:hover{
    background-color: rgb(178, 178, 178);
    color: white;
}