135 lines
2.1 KiB
CSS
135 lines
2.1 KiB
CSS
|
|
/*First lets set some basic styles*/
|
|
body {
|
|
font-family:"Inter", Arial, Helvetica, sans-serif;
|
|
color:white;
|
|
background-image: linear-gradient(to right, #434343 0%, black 100%);
|
|
font-size:1.1em;
|
|
}
|
|
|
|
a{
|
|
color:rgb(0, 191, 255);
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
}
|
|
|
|
p{
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/*Throw a CSS grid in for layout*/
|
|
#content {
|
|
display: grid;
|
|
grid-template-columns: minmax(350px,4fr) minmax(30px,0.5fr) minmax(350px,4fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 20px;
|
|
align-items: center;
|
|
max-width:1000px;
|
|
margin:auto;
|
|
}
|
|
/*h1 overrides for the bubble*/
|
|
#intro h1 {
|
|
font-weight:Normal;
|
|
}
|
|
#intro h1 strong{
|
|
font-weight:bolder;
|
|
}
|
|
|
|
#intro p{
|
|
padding-left:10px;
|
|
margin: 15px 0 15px 0;
|
|
}
|
|
.div4 { grid-area: 3 / 1 / 4 / 4; }
|
|
.div5 { grid-area: 4 / 1 / 5 / 4; }
|
|
|
|
#language_choice{
|
|
grid-area: 1 / 1 / 2 / 4;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#language_choice img{
|
|
object-fit:cover;
|
|
width:42px;
|
|
border-radius:5px;
|
|
}
|
|
|
|
#intro{
|
|
grid-area: 2 / 3 / 3 / 4;
|
|
}
|
|
#phone{
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
#more{
|
|
padding-top:80px;
|
|
grid-area: 3 / 1 / 3 / 4;
|
|
}
|
|
|
|
#more, #sponsors{
|
|
font-size:1.3em;
|
|
}
|
|
|
|
#sponsors{
|
|
grid-area: 4 / 1 / 4 / 4;
|
|
}
|
|
|
|
.besked {
|
|
color: #FFFFFF;
|
|
background-color: #0084FF;
|
|
border-radius: 25px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.besked:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 20px solid transparent;
|
|
border-left-color: #0084FF;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
margin-top: -10px;
|
|
margin-right: -20px;
|
|
}
|
|
|
|
#phone>div{
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
#movie {
|
|
margin-left: 17px;
|
|
margin-top: 77px;
|
|
}
|
|
|
|
#movie-sidetext {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#backarrow{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
a[href="#more"]{
|
|
display:inline-block;
|
|
padding: 6px 8px;
|
|
border-radius:5px;
|
|
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
|
|
font-size:1.3em;
|
|
color:rgba(39, 15, 15, 0.746);
|
|
border:1px solid rgba(255, 255, 255, 0.717);
|
|
float:right;
|
|
}
|
|
|
|
.about-link {
|
|
float: right;
|
|
}
|