Portfolio/Pages/Mainpage.css

129 lines
2 KiB
CSS
Raw Normal View History

@import url("reset.css");
@font-face{
font-family:"roboto";
font-weight: 100;
2020-12-31 15:49:54 +00:00
src: url("../Fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
body{
color: #ffd256;
font-family: "roboto";
background-color: #221A0F;
2020-12-31 15:49:54 +00:00
background-image: url("../Images/BackGroundTestNoGlow.png");
background-position: bottom;
}
h1, h2, h3{
background-color: #ffa500;
background: radial-gradient(#E39823 40%, #8D5001);
border-radius: 5px;
font-size: clamp(12px, 1vw, 50px);
padding: 1.3vh;
}
h1{
font-size: clamp(20px, 4vw, 170px);
padding-left: 6;
margin-left: 2vw;
margin-right: 70vw;
margin-top: 10vh;
margin-bottom: 70vh;
height: 20vh;
text-align: left;
}
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 86vw;
}
.orangeBack{ /*for anything that isnt a <h> tag*/
background-color: #ffa500;
background: radial-gradient(#E39823 40%, #8D5001);
border-radius: 5px;
padding: 5px;
}
.orangeBorder{
border: 5px outset #E39823;
border-radius: 5px;
}
.textBox{
text-align: center;
padding: 2.5vh;
font-size: 1.3vw;
}
#galleryHeader{
margin-left: 35vw;
margin-right: 35vw;
2020-12-31 15:49:54 +00:00
border-radius: 5px;
font-size: 1.4vw;
}
#programGallery{
display: grid;
grid-template-rows: repeat(10, 1fr);
grid-template-columns: repeat(10, 1fr);
height: 70vh;
}
@media (orientation:portrait){
h1{
font-size: 10vw;
margin-left: 0vw;
margin-right: 0vw;
margin-top: 5vh;
margin-bottom: 85vh;
padding-top: 0.5vh;
border-radius: 0;
height: 10vh;
}
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
min-width: inherit;
max-width: inherit;
border-radius: 0;
2020-12-31 15:49:54 +00:00
font-size: 2.3vw;
}
#galleryHeader{
margin-left: 0;
margin-right: 0;
border-radius: 0;
2020-12-31 15:49:54 +00:00
font-size: 3vw;
}
}