<?php
    if($options['GameID_field'] !== '') {
        $gameID = "730";
        $ip = "";
        $link = "steam://run/". $gameID;
        $link_title = "CS:GO";
        $sub_title = "spil noget CS:GO";
        $link_text = "Start spillet";
        $img_link = "https://getwallpapers.com/wallpaper/full/f/2/e/547247.jpg";
        if($ip !== "")
            $link = $link . "//+connect " . $ip . "//";
        echo "<div class='choice'>
            <div class='img-overlay'>
                <img src='".$img_link."' alt=''>
            </div>
            <div class='content'>
                <h3>".$options."</h3>
                <p>".$options."</p>
                <a class='steamlink' href=".$link.">".$link_text."</a>
            </div>";
    }
?>

:root{
    --white:#fff;
}

.steamlink{
    color:#fff;
    border: 1px solid black;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: green;
}

.choice{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    top: 0;
    margin: 5px;
    width: 200px;
}

.choice .img-overlay{
    position: relative;
    height: 26vh;
    overflow: hidden;
}
.choice .img-overlay img{
    width: 100%;
    height: 110%;
    object-fit: cover;
    transform: translate3d(0px, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all .05s linear;
}

.choice:hover .img-overlay img{
    transform: translate3d(0px, -0.9vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.choice .content{
    position: relative;
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0px;
    z-index: 3;
    overflow: visible;
    height: 17vh;
    width: auto;
    padding-top: 2vh;
    background-color: rgba(16, 16, 16, 0.5);
    transition: all .05s linear;
}

.choice .content h3{
    color: var(--white);
}

.choice .content p{
    color: rgba(255, 255, 255, 0.5);
    height: 30px;
}

.choice .content h3,.choice .content p{
    padding: 0 2%;
}

.choice:hover .content{
    background-color: var(--white);
}

.choice:hover .content h3{
    color: #000;
}

.choice:hover .content p{
    color: rgba(0,0,0, 0.5);
}


@media (max-width:426px) {
    .choice{
        width: 100%;
    }
}