@import url('https://fonts.googleapis.com/css2?family=Oxygen&family=Ubuntu:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Work+Sans&display=swap');

body {
 background-image: linear-gradient(to right, darkslateblue , deeppink, orchid, floralwhite);
 background-position: center;
 background-repeat: no-repeat; 
 background-size: cover;
 background-color: black;
}

/* dropdown hover for menu */
.dropbtn {
  background-color: white;
  color: red;
  padding: 5px;
  font-size: 16px;
  border: none;
  width: 150px;
  
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 165px;
  z-index: 1;
}

.dropdown-content a {
  color: red;
  padding: 5px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: white}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: white;
}

a:link {
  text-decoration: none;
  color: red;
}

a:link .two {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: none;
  color: red; 
}

.title {
  font-family: 'Ubuntu';
  color: white;
  font-size: 37.5px;
  border: solid;
  border-color: white;
  width: 680px;
}

.menu {
  position: relative;
  left: 210px;
  font-family: 'Oxygen';
  background-color: white;
  color: red;
  border: solid;
  border-color: white;
  width: 470px;
}

.about {
  position: relative;
  left: 330px;
  font-family: 'Oxygen';
  color: black;
  background-color: white;
  width: 350px;
  font-size: 15px;
  border: solid;
  border-color: white;
}

mark.one {
  color: red;
  background-color: white;
}

mark.two {
  color: white;
  background-color: purple;
}

mark.three {
  color: white;
  background-color: green;
}

mark.current {
  color: white;
  background-color: purple;
}

.image-size {
    width: 350px;
    height: 250px;
  }

.image-size2 {
    width: 350px;
    height: 450px;
  }

/* responsive styling for mobile browsing */

/* when screen is 750px or less apply changes */
@media only screen and (max-width: 750px) {
  
  /*centers the entire site in responsive mode*/
  .content {
    margin-left: 5%;
  }

  /* remove .gif background set background color to black */
  body {
    background-image: linear-gradient(to right, darkgoldenrod , darkslateblue);
  }
  
  .menu {  
    left: 0px;
    font-size: 10px;
    padding: 2px;
    width: 316px;
  }

  .dropbtn {
  padding: 2px;
  font-size: 12px;
  width: 80px;
  }

  .dropdown-content {
  min-width: 90px;
  }

  .title {
  font-family: 'Ubuntu';
  color: white;
  font-size: 34px;
  width: 320px;
  }

  .about {
  left: 5px;
  width: 315px;
  margin-top: 75px !important;  
  }

  .image-size {
    width: 315px;
    height: 200px;
  }

  .image-size2 {
    width: 315px;
    height: 400px;
  }

}