@font-face {
    font-family: 'windsor_mt_stdregular';
    src: url('windsormtstd-webfont.woff2') format('woff2'),
         url('windsormtstd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'itc_souvenirmedium';
    src: url('font/souvenir-medium-webfont.woff2') format('woff2'),
         url('font/souvenir-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gosoulregular';
    src: url('font/gosoul___2-webfont.woff2') format('woff2'),
         url('font/gosoul___2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html,
body {
  background-color: rgba(186, 176, 154, 0.2);	/*beige*/
  color: #fff;
  height: 100%;
  margin: 0;
  min-height: 100%;
  position: relative;
}

a{
  text-decoration: none;
}

.menu{
    position: absolute;
    height: 100px;
    padding: 0px 0px 0px 200px;
    top: 0;
    z-index: 50;

}

.button{
  cursor: pointer;
}

.squiggle{
    position: absolute;
    padding: 0px 0px 0px 200px;
    top: 150px;
    z-index: 40;
    margin-left: 700px;
}

.squiggle2{
    position: absolute;
    padding: 0px 0px 0px 200px;
    top: 550px;
    z-index: 45;
    margin-left: 100px;
}

p:hover {
    color:rgb(144, 103, 247); /*violet*/
    padding:20px; 

  }

.about:hover{
  color:white; 
}




p{
  color:white; 
  font-family: 'itc_souvenirmedium';
  padding: 20px;
  font-size: 20px;
  margin:0px;
  transition-property: color;
  transition-duration: 1s;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
}



.stripes {
  width: 100%;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-auto-flow: row;
  position: fixed;
  bottom: 0px;
  top: 0px;
  overflow-y: scroll;
  scroll-behavior: smooth; 
}

.box {
  width: 1fr;
  height: 1fr;
  background: rgba(186, 176, 154, 1); /* dark grey*/
  border-radius: 0px;
  padding:20px;
  font-size: 30px;
  
}

.box:nth-child(even){
  background: rgb(239, 207, 26); /*yellow*/
}

.box:hover{
  width: 200px;
 height: 200px;
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 60; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 255,0.4); /* Blue w/ opacity */
}


/* Modal Content */
.modal-content {
    background-color: rgba(255,255,255,0); /*clear*/
    margin: auto;
    padding: 0px;
    border: none;
    width: 600px;
    z-index: 65;
}

img{
    display: flex;
  margin: auto;
}

/* 3d goobers */
#draggable { 
  width: 200px; 
  padding: 0.5em; 
   -webkit-transition: width 2s;
}

#draggable2 { 
  width: 200px; 
  padding: 0.5em; 
  transition: all 0.5s ease-out;
}
#draggable3 { 
  width: 500px; 
  padding: 0.5em; 
}

#draggable:hover {
    width: 300px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    
  }

 #draggable2:hover{
  transform: rotate(300deg);
 }