@font-face {
    font-family: "Balsamiq Sans";
    src: url(f) format("truetype"),
}

.balsamiq-sans-regular {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.balsamiq-sans-bold {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.balsamiq-sans-regular-italic {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.balsamiq-sans-bold-italic {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

p {
  font-family: Balsamiq Sans; 
  margin-top: 0;
  margin-bottom: 0;
  color: white;
}

a {
  font-family: Balsamiq Sans; 
  color: #FFFFB4;
  text-decoration: none;
}

a:hover {
  color: #A6CEE7;
  font-weight: bold;
  text-decoration: underline;
}

a:visited {
color: #53819e;

}

.body {font-family: Balsamiq Sans;}

h1, h2, h3, h4, h5, h6 { 
  font-family: Balsamiq Sans;
text-align: center;
color: white;}

ul {font-family: Balsamiq Sans;}

mark {
  background-color: #af4033;
}

hr {
  border-top: 10px solid white;
  border-radius: 10px;
  width: 100%;

}


@media (prefers-color-scheme: dark) { body {background-color: grey;} 
p {color: white;}

} 
@media (prefers-color-scheme: light) { body {background-color: #FFFFE0;} } 

 /*FOR MOBILE*/
@media (max-width:599px) { 
    
    
            .bissurat img{
              height: 180vw;
              position: absolute;
              margin-left: -1;
              }
            
              #nametag {
                height: 28vw;
                position: absolute;
                margin-top: 8vw;
                margin-left: 24vw;
            }

            #art {
                height: 40vw;
                position: absolute;
                margin-top: 37vw;
                margin-left: 14vw;
            }

            #poetry {
                height: 10vw;
                position: absolute;
                margin-top: 74.5vw;
                margin-left: 25vw;
            }

            #vawelry {
                height: 20vw;
                position: absolute;
                margin-top: 88vw;
                margin-left: 15vw;
            }

            #talasImage {
                height: 30vw;
                position: absolute;
                margin-top: 40vw;
                margin-left: 52vw;
            }

            #sucks {
                height: 33vw;
                position: absolute;
                margin-top: 112vw;
                margin-left: 10vw;
            }

            #electric {
                height: 15vw;
                position: absolute;
                margin-top: 110vw;
                margin-left: 33vw;
            }

            .homecontent {

                position: absolute;
                margin-top: 185vw;
                margin-left: 2vw;
                text-align: justify;
                width: 80vw;
                background-color: rgba(131, 40, 43, 1);
                border-radius: 10px;
                padding: 6vw;

            }

            .homecontent img {
                display: block;
            }


            
            }

 /*FOR DESKTOP*/

@media (min-width:600px) { 
    
    
            .bissurat img{
              height: 75vw;
              position: absolute;
              margin-left: 30vw;
              }

            
              #nametag {
                height: 13vw;
                position: absolute;
                margin-top: 2vw;
                margin-left: 40vw;
            }

            #art {
                height: 17vw;
                position: absolute;
                margin-top: 15vw;
                margin-left: 37vw;
            }

            #poetry {
                height: 4vw;
                position: absolute;
                margin-top: 31vw;
                margin-left: 42.5vw;
            }

            #vawelry {
                height: 8vw;
                position: absolute;
                margin-top: 35vw;
                margin-left: 37vw;
            }

            #talasImage {
                height: 13vw;
                position: absolute;
                margin-top: 17vw;
                margin-left: 51vw;
            }

            #sucks {
                height: 13vw;
                position: absolute;
                margin-top: 45vw;
                margin-left: 35.8vw;
            }

            #electric {
                height: 6vw;
                position: absolute;
                margin-top: 45vw;
                margin-left: 44vw;
            }


            .homecontent {

                position: absolute;
                text-align: justify;
                margin-top: 77vw;
                margin-left: 15vw;
                width: 60vw;
                background-color: rgba(131, 40, 43, 1);
                border-radius: 50px;
                padding: 5vw;

            }

            p {
                font-size: 22px;
              }

            a {
                font-size: 22px;
                }

            h1, h2, h3, h4, h5, h6 { 
            font-size: 30px;}

                     
            }


            .button:hover { filter: drop-shadow(0 0 2vw rgb(255, 255, 255));
}


#talasImage:hover {filter: drop-shadow(0 0 2vw rgb(255, 255, 255));
cursor: pointer;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* 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,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80vw;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80vw;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 10vw;
  font-family: "Balsamiq Sans";
}


/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}