:root {
    --screen-img-width: calc((100vw - 900px)/2);
    --screen-button-width: calc((100vw - 400px)/3);
    --screen-min-button-width: calc((100vw - 300px)/3);
    --screen-very-min-button-width: calc((100vw - 200px)/3);
}

html {
    background-color: black;
}

a:link {color: black;}
a:visited {color: black;}
a:hover {color: black;}
a:active {color: black;}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

h1#title {
    font-size: 50px;
    color: #fff;
    text-align: center;
    animation: show 2s;
    animation-timing-function: ease-in-out;
}

p#introduce {
    font-size: 20px;
    color: #fff;
    text-align: center;
    animation: show 2s;
    animation-timing-function: ease-in-out;
}

h1#openweb {
    color: rgb(138, 43, 226);
    text-align: center;
    animation: show 2s;
    animation-timing-function: ease-in-out;
}

@media screen and (min-width: 900px) {
    img {
        margin-left: var(--screen-img-width);
        animation: show 2s;
        animation-timing-function: ease-in-out;
    }
}

@media screen and (max-width: 900px) {
    img {
        display: none
    }
}

@media screen and (min-width: 530px) {
    button.Linkbutton {
        margin-left: var(--screen-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 200px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

@media screen and (max-width: 530px) {
    button.Linkbutton {
        margin-left: var(--screen-min-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 150px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

@media screen and (max-width: 370px) {
    button.Linkbutton {
        margin-left: var(--screen-very-min-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 100px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

@media screen and (min-width: 530px) {
    button.disableLinkbutton {
        margin-left: var(--screen-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 200px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

@media screen and (max-width: 530px) {
    button.disableLinkbutton {
        margin-left: var(--screen-min-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 150px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

@media screen and (max-width: 370px) {
    button.disableLinkbutton {
        margin-left: var(--screen-very-min-button-width);
        margin-top: 50px;
        text-align: center;
        border: 2px solid;
        border-color: white;
        background-color: black;
        color: white;
        border-radius: 10px;
        font-size: 20px;
        width: 100px;
        height: 50px;
        animation: show 2s;
        animation-timing-function: ease-in-out;
        vertical-align:middle
    }
}

button.Linkbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button.Linkbutton span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button.Linkbutton:hover span {
  padding-right: 25px;
}

button.Linkbutton:hover span:after {
  opacity: 1;
  right: 0;
}

button.disableLinkbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button.disableLinkbutton span:after {
  content: '×';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button.disableLinkbutton:hover span {
  padding-right: 25px;
}

button.disableLinkbutton:hover span:after {
  opacity: 1;
  right: 0;
}

button.disableLinkbutton:hover {
    background-color: #db2222;
}

p#by {
    text-align: right;
    color: rgb(50, 50, 50);
    animation: show 2s;
    animation-timing-function: ease-in-out;
}