@media only screen and (min-width: 0px)
{

html
{
cursor: url("photos/cursor.png"), auto;
}

body
{
background-color: #232a44;
background-image: url("photos/pattern.png");
background-size: 500px 500px;
}

.marcellus-regular {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}


ul
{
list-style-type: none;
display: flex;
width: 65.5%;
height: 3vw;
background-color: #394060;
margin-top: 1.5%;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
border: 2px solid #a18834;
}

li
{
display: block;
padding: 10px 12px;
margin-left: 110px;
margin-top: 8px;
border-radius: 10px;
height: 5px;
font-family: "Marcellus", serif;
font-weight: 400;
font-style: normal;
font-size: 1vw;
color: #9ca0b0;
}

a
{
color: #ffffff;
text-decoration: none;
}

a:hover
{
color: #ffffff;
text-decoration: none;
background-image: url("photos/lightning.gif" width= 100%);
}

.logo
{
display: flex;
width: 80%;
height: 25vw;
background-color: #transparent;
margin-left: 10%;
margin-top: 1%;
float: left;
}

.title
{
display: flex-item;
width: 70%;
height: 35%;
background-color: transparent;
margin-left: 15%;
margin-top: 3%;
font-size: 1.9vw;
font-family: "Marcellus", serif;
font-weight: 200;
font-style: normal;
color: #ffffff;
letter-spacing: 2px;
}

.underline
{
width: 105%;
height: 2.5%;
background-color: #a18834;
margin-left: -2%;
margin-top: -4%;
border-radius: 10px;
}

.desc
{
width: 100%;
height: 80%;
background-color: transparent;
font-size: 1.5vw;
}

.content
{
width: 80%;
height: 105vw;
background-color: transparent;
margin-left: 10%;
margin-top: 40%;
}

.content1
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
}

.context1
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-left: 3vw;
}

.picture1
{
display: flex-item;
width: 35%;
height: 25vw;
background-color: transparent;
margin-left: 12.7vw;
}

.content2
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
}

.context2
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-right: 3vw;
}

.picture2
{
display: flex-item;
width: 35%;
height: 25vw;
background-color: transparent;
margin-right: 12.7vw;
}

.content3
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
}

.context3
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-left: 3vw;
}

.picture3
{
display: flex-item;
width: 35%;
height: 25vw;
background-color: transparent;
margin-left: 12.7vw;
}

p
{
font-size: 2vw;
font-family: "Marcellus", serif;
font-weight: 200;
font-style: normal;
color: #ffffff;
}

@media only screen and (max-width: 580px)
{

html
{
cursor: url("photos/cursor.png"), auto;
}

body
{
background-color: #232a44;
background-image: url("photos/pattern.png");
background-size: 300px 300px;
height: 320vw;
}

.marcellus-regular 
{
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}


ul
{
list-style-type: none;
display: flex;
flex-direction: column;
width:  100%;
height: 40vw;
background-color: #394060;
margin-top: -8px;
margin-left: -20px;
border-radius: 0px;
border: 4px solid #a18834;
}

li
{
display: block;
padding: 10px 12px;
margin-left: -40px;
margin-top: 8px;
border-radius: 10px;
height: 5px;
font-family: "Marcellus", serif;
font-weight: 400;
font-style: normal;
font-size: 5vw;
color: #9ca0b0;
text-align: center;
}

a
{
color: #ffffff;
text-decoration: none;
}

a:hover
{
color: #ffffff;
text-decoration: none;
background-image: url("photos/lightning.gif" width= 100%);
}

.logo
{
display: block;
width: 90%;
height: 65vw;
background-color: transparent;
margin-left: 5%;
margin-top: -15%;
float: left;
}

.title
{
display: flex-item;
width: 100%;
height: 35%;
background-color: transparent;
margin-left: 1%;
margin-top: 25%;
font-size: 3vw;
font-family: "Marcellus", serif;
font-weight: 200;
font-style: normal;
color: #ffffff;
letter-spacing: 2px;
}

.underline
{
width: 90%;
height: 2.5%;
background-color: #a18834;
margin-left: 4%;
margin-top: -3%;
border-radius: 10px;
}

.desc
{
width: 100%;
height: 80%;
background-color: transparent;
font-size: 3vw;
}

.content
{
width: 80%;
height: 205vw;
background-color: transparent;
margin-left: 10%;
margin-top: 30%;
}

.content1
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
}

.context1
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-left: 3vw;
}

.picture1
{
display: flex-item;
width: 35%;
height: 25vw;
background-color: transparent;
margin-left: 12.7vw;
margin-top: 15vw;
}

.content2
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
margin-top: 20vw;
}

.context2
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-right: 3vw;
}

.picture2
{
display: flex-item;
width: 40%;
height: 25vw;
background-color: transparent;
margin-right: 12.7vw;
margin-top: 25vw;
}

.content3
{
display: flex;
width: 100%;
height: 35vw;
background-color: transparent;
margin-top: 45vw;
}

.context3
{
display: flex-item;
width: 50%;
height: 20vw;
background-color: transparent;
margin-left: 3vw;
}

.picture3
{
display: flex-item;
width: 45%;
height: 25vw;
background-color: transparent;
margin-left: 12.7vw;
margin-top: 15vw;
}

p
{
font-size: 3vw;
font-family: "Marcellus", serif;
font-weight: 200;
font-style: normal;
color: #ffffff;
}

}